<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 定位 -->
    相对定位 绝对定位 固定定位

    <!-- 相对定位 -->
    position: relative;
    相对定位: 相对于自己的位置移动
    保留位置，还是标准流

    <!-- 绝对定位 -->
    position: absolute;
    1.绝对定位移动的位置为当前页面的位置
    2.父元素只有加上除了静态定位以外的定位才能框柱
    3.绝对定位不占位置

    <!-- 子绝父相 -->
    子绝父相 子元素为绝对定位,父元素就要将其框柱,若同样用绝对,那么内容就不占位置,下面的内容就会升上来,所以要用相对定位占位置

    <!-- 固定定位 -->
    position: fixed;
    以浏览器为准不受盒子限制,上下滑动也固定在一个位置,脱离标准流
</body>

</html>